<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xhDuH5BvfrENw45kGu5OdUD4w3G1e5v3"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<title>地图</title>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
	//百度地图API功能

	function loadJScript() {
		var script = document.createElement("script");
		script.type = "text/javascript";
		script.src = "https://api.map.baidu.com/api?v=2.0&ak=xhDuH5BvfrENw45kGu5OdUD4w3G1e5v3&callback=init";
		document.body.appendChild(script);
	}
	function init() {
		var map = new BMap.Map("allmap",{enableMapClick:false});   // 创建Map实例
		var point = new BMap.Point("${longitude}","${latitude}"); // 创建点坐标

		var lng="${longitude}";
		var lat="${latitude}";

		//用于存放marker的数组
		var markers = new Array();

		map.centerAndZoom(point,14);
		map.enableScrollWheelZoom();//启用滚轮放大缩小
		var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
		map.addControl(top_left_control);

		<c:forEach var="it" items="${list}" varStatus="index">


		var p = new BMap.Point("${it.facLon}", "${it.facLat}");
		var marker = new BMap.Marker(p);
		var devCode='${it.devCode}';
		addClickHandler(devCode,marker,map);

		markers.push(marker);

		</c:forEach>

		//生成一个marker数组，然后调用markerClusterer类即可。
		var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});


	}

	function addClickHandler(devCode,marker,map){
		marker.addEventListener("click",function(event){
			addToGroup(devCode,marker,map,event)}
		);
	}
	function addToGroup(devCode,marker,map,event){
		alert(devCode);
		if(confirm("要在当前区域中添加该设备？")){
			$.ajax({
				method:'get',
				async:false,
				dataType:'json',
				cache:false,
				url:'../area/add2group/'+devCode+'/group/'+'${groupId}',
				success:function(data){
					if(data==1){
						alert('添加成功');
						map.removeOverlay(marker);
					}else{
						alert('添加失败');
					}
				}
			});
		}
	}

	window.onload = loadJScript;  //异步加载地图

</script>
</body>
</html>

